<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <a href="#/home">主页</a>
        |
        <a href="#/news">新闻</a>
        <div id="content"></div>
    </div>
</body>

</html>
<script>
    // hash模式,通过url变化进行跳转,但是url#号后面的路径变化,不会向服务器发起请求

    // hashchange 通过这个事件侦听hash值的变化

    // let content = document.querySelector('#content')
    // window.onhashchange = function () {
    //     console.log(location.hash)
    //     let hash = location.hash //获取hash值
    //     switch (hash) {
    //         case '#/home':
    //             content.innerHTML = "<h1>主页</h1>";
    //             break;
    //         case '#/news':
    //             content.innerHTML = "<h1>新闻</h1>";
    //     }
    // }


    //history模式,主要是应用了H5浏览器中history中新增的两个方法,一个方法pushState replaceState

    //使用pushState或者replaceState变更地址的时候,不会向服务器发起请求,页面也不会刷新

    //容易造成404问题,原因是将地址栏的地址当成了http请求,服务器未响应,就是404
    //获取a标签

    //侦听变化的事件:popstate,必须通过浏览器的前进和后退按钮才能触发

    let as = document.getElementsByTagName('a');
    //没有展开运算符的时候这么写
    // Array.prototype.slice.call(as)
    [...as].forEach(a => {
        // console.log(a)
        a.onclick = function (e) {
            e.preventDefault()
            // console.log(this.href)
            let href = this.getAttribute('href').substring(1)
            // console.log(href)
            history.pushState({ href }, null, href)
        }
    })

    window.onpopstate = function (e) {
        console.log(e)
    }
</script>